<template>
  <div class="diy-signet-wrapper">
    <a-form layout="vertical">
      <a-form-item label="层级">
        <a-input-number
          class="w-full"
          v-model:value="currentComponent.style.zIndex"
        ></a-input-number>
      </a-form-item>
      <a-form-item label="尺寸" name="width">
        <a-input-number class="w-full" disabled v-model:value="width" />
      </a-form-item>
      <a-form-item label="文字" name="text">
        <a-input class="w-full" v-model:value="currentComponent.data.text" />
      </a-form-item>
      <a-form-item label="间距" name="margin">
        <a-input-number class="w-full" v-model:value="currentComponent.data.margin" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useCertStore } from '@/stores'
import { computed, type Ref } from 'vue'
import { getPxValue, setPxValue } from '@/utils'
import { storeToRefs } from 'pinia'
import type DiyQrcode from '@/diy/config/DiyQrcode'

const store = useCertStore()

const currentComponent: Ref<DiyQrcode> = storeToRefs(store).currentComponent as Ref<DiyQrcode>

//印章尺寸
const width = computed({
  get() {
    return getPxValue(currentComponent.value.style.width)
  },
  set(value: number) {
    currentComponent.value.style.width = setPxValue(value)
    currentComponent.value.style.height = setPxValue(value)
  }
})
</script>

<style scoped lang="less">
.reload {
  color: #a19e9e;
  margin-left: 12px;
  &:active {
    scale: 1.08;
  }
}
</style>
